<template>
  <Skeleton title avatar :row="20" :loading="loading" class="skeleton-loading">
    <div>
      <div class="top-content">
        <MenuGrid :menuList="menuList" :rows="4" iconColor="#ffffff" @jumpTo="handleMenuClick" />
        <NoticeBar class="notice-bar" scrollable text="如果你不出去走走，你会以为这就是世界。" background="transparent" left-icon="volume-o" color="#ffffff"/>
      </div>
      <Swipe class="swiper-box" :autoplay="3000">
        <SwipeItem v-for="(image,index) in images" :key="image" @click="handleSwipeClick(index)">
          <img :src="image">
        </SwipeItem>
      </Swipe>
    </div>
  </Skeleton>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { Swipe, SwipeItem, Skeleton, Toast, Grid, GridItem, NoticeBar  } from 'vant'
import MenuGrid from '@/components/menuGrid/index.vue'
const loading = ref(true)
const images = [
  'https://img.yzcdn.cn/vant/apple-1.jpg',
  'https://img.yzcdn.cn/vant/apple-2.jpg'
]
const menuList = [{iconName: 'cash-back-record', name: '收付款'},{iconName: 'logistics', name: '出行'},{iconName: 'scan', name: '扫一扫'},{iconName: 'debit-pay', name: '卡管理'}]
onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 500)

  // this.$toast('111')
})
/**
 * @description 轮播图点击事件
 */
const handleSwipeClick = (item) => {
  Toast(item)
}
const handleMenuClick = (url)=>{
    console.log(url)
}
</script>
<style lang="scss" scoped>
.skeleton-loading {
    background-color: #fff;
}
.top-content{
    width: 100%;
    height: 328px;
    background: url(~@/assets/topBackground.png);
    background-size: 100% 100%;
    .notice-bar{
        margin-top: 20px;
        font-size: 32px;
    }
}
.swiper-box {
    margin: 20px 0;
    height: 500px;
    border-radius: 12px;
    .van-swipe-item {
        width: 750px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 75%;
        }
    }
}
</style>>

